<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->
@if (rulesList.length === 0 && !newRule) {
    <div class="h-full flex justify-center items-center gap-x-4">
        @if (isEditable) {
            <div>No rules configured for this Processor. Get started by defining your first.</div>
            <button mat-flat-button (click)="populateNewRule()">Create Rule</button>
        } @else {
            <div>No rules configured for this Processor.</div>
        }
    </div>
} @else {
    <div class="rule-listing flex flex-col gap-y-4">
        @if (rulesList.length > 0 || !newRule) {
            <div class="flex flex-col gap-y-1">
                <div class="flex gap-x-2 items-center">
                    <div class="flex gap-x-1 items-center">
                        <div>Use original FlowFile for matching rules</div>
                        <i
                            class="fa fa-info-circle primary-color"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="If disabled rules will be executed using a clone of the original FlowFile"></i>
                    </div>
                    <form [formGroup]="flowFilePolicyForm">
                        <mat-slide-toggle
                            formControlName="useOriginalFlowFilePolicy"
                            (change)="flowFilePolicyToggled($event)"></mat-slide-toggle>
                    </form>
                </div>
            </div>
        }
        <div class="flex justify-between items-center">
            <form [formGroup]="searchForm">
                @if (!newRule) {
                    <mat-form-field subscriptSizing="dynamic">
                        <mat-label>Search</mat-label>
                        <input matInput type="text" class="small" formControlName="searchRules" />
                    </mat-form-field>
                }
            </form>
            <div class="flex gap-x-1">
                @if (flowFilePolicy === 'USE_ORIGINAL' && !reorderDisabled()) {
                    <div class="flex gap-x-2 items-center">
                        <div>Reorder rules</div>
                        <mat-slide-toggle
                            [checked]="allowRuleReordering"
                            (change)="setAllowRuleReordering($event)"></mat-slide-toggle>
                    </div>
                }
                @if (!newRule) {
                    <button
                        mat-icon-button
                        class="primary-icon-button"
                        [disabled]="!isEditable || allowRuleReordering"
                        (click)="populateNewRule()">
                        <i class="fa fa-plus"></i>
                    </button>
                }
            </div>
        </div>
        @if (filteredRulesList.length === 0 && !newRule) {
            <div class="unset">No matching rules</div>
        } @else {
            @if (allowRuleReordering) {
                <mat-accordion
                    [multi]="true"
                    cdkDropList
                    [cdkDropListDisabled]="!isEditable"
                    [cdkDropListData]="rulesList"
                    (cdkDropListDropped)="reorderRules($event)">
                    @for (rule of filteredRulesList; track rule.id) {
                        <mat-expansion-panel cdkDrag cdkDragPreviewContainer="parent">
                            <mat-expansion-panel-header
                                class="reorder-header"
                                [collapsedHeight]="'42px'"
                                [expandedHeight]="'42px'">
                                <mat-panel-title>
                                    <div class="flex justify-between items-center">
                                        <span class="grip -mt-0.5 mr-5 cursor-grab"></span>
                                        <div class="flex-1 truncate">
                                            {{ rule.name }}
                                        </div>
                                    </div>
                                </mat-panel-title>
                                <mat-panel-description>
                                    {{ rule.comments }}
                                </mat-panel-description>
                            </mat-expansion-panel-header>
                            <edit-rule
                                [id]="rule.id"
                                [name]="rule.name"
                                [existingRuleNames]="getExistingRuleNames()"
                                [comments]="rule.comments"
                                [conditions]="rule.conditions"
                                [actions]="rule.actions"
                                [editable]="false"></edit-rule>
                        </mat-expansion-panel>
                    }
                </mat-accordion>
            } @else {
                <mat-accordion [multi]="true">
                    @for (rule of filteredRulesList; track rule.id) {
                        <mat-expansion-panel
                            #expansionPanel
                            (opened)="panelOpened()"
                            (closed)="panelClosed()"
                            [disabled]="isDirty(rule.id)">
                            <mat-expansion-panel-header
                                class="editable-header"
                                [collapsedHeight]="'42px'"
                                [expandedHeight]="'42px'">
                                <mat-panel-title>
                                    {{ rule.name }}
                                </mat-panel-title>
                                <mat-panel-description>
                                    <div class="flex justify-between items-center">
                                        <div class="flex-1 truncate">
                                            {{ rule.comments }}
                                        </div>
                                        @if (isEditable) {
                                            <button
                                                mat-icon-button
                                                type="button"
                                                [matMenuTriggerFor]="actionMenu"
                                                (click)="$event.stopPropagation()"
                                                (keydown)="$event.stopPropagation()"
                                                class="flex items-center justify-center icon global-menu">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                            <mat-menu #actionMenu="matMenu" xPosition="before">
                                                <button mat-menu-item title="Clone Rule" (click)="cloneRule(rule)">
                                                    <i class="fa fa-clone primary-color mr-2"></i>
                                                    Clone
                                                </button>
                                                <button mat-menu-item title="Delete" (click)="deleteRule(rule)">
                                                    <i class="fa fa-trash primary-color mr-2"></i>
                                                    Delete
                                                </button>
                                            </mat-menu>
                                        }
                                    </div>
                                </mat-panel-description>
                            </mat-expansion-panel-header>
                            <edit-rule
                                [id]="rule.id"
                                [name]="rule.name"
                                [existingRuleNames]="getExistingRuleNames()"
                                [comments]="rule.comments"
                                [conditions]="rule.conditions"
                                [actions]="rule.actions"
                                [editable]="isEditable"
                                [ruleUpdate]="(getRuleUpdates(rule.id) | async)!"
                                (editRule)="editRule($event)"
                                (dirty)="setDirty(rule.id, $event)"
                                (exit)="expansionPanel.close()"></edit-rule>
                        </mat-expansion-panel>
                    }
                    @if (newRule) {
                        <mat-expansion-panel expanded="true" disabled="true">
                            <mat-expansion-panel-header>
                                <mat-panel-title class="items-center">
                                    <span class="unset">New rule</span>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <edit-rule
                                class="new-rule"
                                [name]="newRule.name"
                                [existingRuleNames]="getExistingRuleNames()"
                                [comments]="newRule.comments"
                                [conditions]="newRule.conditions"
                                [actions]="newRule.actions"
                                [editable]="isEditable"
                                (afterInit)="newRuleExpanded()"
                                (addRule)="createRule($event)"
                                (exit)="cancelNewRule()"></edit-rule>
                        </mat-expansion-panel>
                    }
                </mat-accordion>
            }
        }
    </div>
}
